<!-- 设置更新 -->
<template>
  <div id="setting">
    <div class="title">Account Setting</div>
    <el-row :gutter="26">
      <el-col :sm="12">
        <div class="list">
          <div
            class="tit"
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
          >
            Name
          </div>
          <input
            type="text"
            v-model="form.name"
            :style="{
              color: bgcColor.color === '#000' ? '#6e6e6e' : '#fff',
              backgroundColor:
                bgcColor.color === '#000' ? '#fff' : 'rgb(46, 46, 64)',
              borderColor:
                bgcColor.color === '#000'
                  ? 'rgb(245, 245, 245)'
                  : 'rgb(46, 46, 64)'
            }"
          />
        </div>
      </el-col>
      <el-col :sm="12">
        <div class="list">
          <div
            class="tit"
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
          >
            Email
          </div>
          <input
            type="text"
            v-model="form.email"
            :style="{
              color: bgcColor.color === '#000' ? '#6e6e6e' : '#fff',
              backgroundColor:
                bgcColor.color === '#000' ? '#fff' : 'rgb(46, 46, 64)',
              borderColor:
                bgcColor.color === '#000'
                  ? 'rgb(245, 245, 245)'
                  : 'rgb(46, 46, 64)'
            }"
          />
        </div>
      </el-col>
      <el-col :sm="12">
        <div class="list">
          <div
            class="tit"
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
          >
            Phone
          </div>
          <input
            type="text"
            v-model="form.phone"
            :style="{
              color: bgcColor.color === '#000' ? '#6e6e6e' : '#fff',
              backgroundColor:
                bgcColor.color === '#000' ? '#fff' : 'rgb(46, 46, 64)',
              borderColor:
                bgcColor.color === '#000'
                  ? 'rgb(245, 245, 245)'
                  : 'rgb(46, 46, 64)'
            }"
          />
        </div>
      </el-col>
      <el-col :sm="12">
        <div class="list">
          <div
            class="tit"
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
          >
            Occupation
          </div>
          <input
            type="text"
            v-model="form.occupation"
            :style="{
              color: bgcColor.color === '#000' ? '#6e6e6e' : '#fff',
              backgroundColor:
                bgcColor.color === '#000' ? '#fff' : 'rgb(46, 46, 64)',
              borderColor:
                bgcColor.color === '#000'
                  ? 'rgb(245, 245, 245)'
                  : 'rgb(46, 46, 64)'
            }"
          />
        </div>
      </el-col>
      <el-col :sm="24">
        <div class="list">
          <div
            class="tit"
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
          >
            Introduce
          </div>
          <textarea
            type="text"
            v-model="form.des"
            :style="{
              color: bgcColor.color === '#000' ? '#6e6e6e' : '#fff',
              backgroundColor:
                bgcColor.color === '#000' ? '#fff' : 'rgb(46, 46, 64)',
              borderColor:
                bgcColor.color === '#000'
                  ? 'rgb(245, 245, 245)'
                  : 'rgb(46, 46, 64)'
            }"
          />
        </div>
      </el-col>
    </el-row>
    <div class="update" @click="throttlHandleClick">to update</div>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { admintorUpdateInfo } from '@/server/serve/api_admintor'
import type { UserInfoVuexTypes } from '@/server/serve/api_admintor'
import { ElMessage } from 'element-plus'
import cache, { CacheType } from '@/utils/cache'
import throttl from '@/utils/throttl'

interface PropsTypes {
  userInfo: UserInfoVuexTypes
}

const store = useStore()

const props = defineProps<PropsTypes>()

const bgcColor = computed(() => store.state.Background)

const form = reactive({
  name: '',
  email: '',
  phone: '',
  occupation: '',
  des: ''
})

onMounted(() => {
  form.name = props.userInfo.name
  form.email = props.userInfo.email
  form.phone = props.userInfo.phone || '暂无填写'
  form.occupation = props.userInfo.occupation
  form.des = props.userInfo.des
})

// 修改
const handleClick = async () => {
  const { data } = await admintorUpdateInfo({
    userID: props.userInfo._id,
    ...form
  })
  if (data.code)
    return ElMessage({
      type: 'warning',
      message: data.mes
    })

  // 更新token
  cache.setItem('token', data.data?.token, CacheType.session)

  // 更新vuex
  store.commit('setUserInfo', data.data?.vuexData)

  ElMessage({
    type: 'success',
    message: data.mes
  })
}

// 节流处理 点击修改
const throttlHandleClick = throttl(handleClick, 2000)
</script>

<style scoped lang="less">
#setting {
  animation: fadeInUp;
  // 动画持续时间
  animation-duration: 0.5s;
  .title {
    color: #f93a08;
    margin: 8px 0;
    font-weight: 600;
    font-size: 17px;
  }
  .list {
    margin-top: 14px;
    .tit {
      color: #393939;
      font-size: 13px;
    }
    input {
      margin-top: 10px;
      border-radius: 16px;
      outline: none;
      height: 42px;
      text-indent: 1em;
      display: block;
      width: 100%;
      color: #6e6e6e;
      font-size: 14px;
      box-sizing: border-box;
      border: 1px solid rgb(245, 245, 245);
      transition: all 0.3s;
      &:focus {
        border: 1px solid rgb(245, 108, 108) !important;
      }
      &:hover {
        border: 1px solid rgba(245, 108, 108, 0.5) !important;
      }
    }
    textarea {
      margin-top: 10px;
      width: 100%;
      resize: none;
      border-radius: 16px;
      outline: none;
      border: 1px solid rgb(245, 245, 245);
      height: 100px;
      padding: 10px;
      box-sizing: border-box;
      font-size: 15px;
      color: #6e6e6e;
      &:focus {
        border: 1px solid rgb(245, 108, 108) !important;
      }
      &:hover {
        border: 1px solid rgba(245, 108, 108, 0.5) !important;
      }
    }
  }
  .update {
    width: 70px;
    height: 38px;
    background-color: #f93a08;
    border-radius: 16px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    margin-top: 30px;
    cursor: pointer;
    padding: 2px 5px;
    &:hover {
      background-color: rgb(204, 44, 5);
    }
  }
}
</style>
